<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>主页</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
<link rel="stylesheet" th:href="@{/css/main.css}" media="all">
</head>
<body>
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header">
			<div class="layui-logo">
				<a href="/main" class="logo">Spring Security</a>
			</div>
			<ul class="layui-nav layui-layout-right">
				<li class="layui-nav-item"><a href="javascript:;" th:text="${username}"> </a>
					<dl class="layui-nav-child">
						<dd>
							<form id="logoutForm" action="/logout" method="post"
								style="display: none;">
								<input type="hidden" th:name="${_csrf.parameterName}"
									th:value="${_csrf.token}">
							</form>
							<a
								href="javascript:document.getElementById('logoutForm').submit();">退出系统</a>
						</dd>
					</dl></li>
			</ul>
		</div>
		<div class="layui-side layui-bg-black">
			<div class="layui-side-scroll">
				<ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo">
					<li class="layui-nav-item layui-nav-itemed"><a
						href="javascript:;">资源下载</a>
						<dl class="layui-nav-child">
							<dd>
								<a  nav-id="001" data-url="/publicResource" onclick="active.tabAdd(this)">公共资源</a>
							</dd>
							<dd>
								<a nav-id="002" data-url="/vipResource" onclick="active.tabAdd(this)">VIP资源</a>
							</dd>
						</dl></li>
					<li class="layui-nav-item"><a href="javascript:;">系统管理</a>
						<dl class="layui-nav-child">
							<dd>
								<a href="">用户管理</a>
							</dd>
							<dd>
								<a href="">角色管理</a>
							</dd>
							<dd>
								<a href="">权限管理</a>
							</dd>
							<dd>
								<a href="">系统日志</a>
							</dd>
						</dl></li>
				</ul>
			</div>
		</div>
		<div class="layui-body" style="padding: 0px; margin: 0px; overflow: hidden;left:200px;">
			<!-- 内容主体区域 -->
			<div style="padding: 0px; margin: 0px; overflow: hidden;"  id="admin-body">
				<div class="layui-tab admin-nav-card layui-tab-brief" lay-filter="admin-tab"  style="margin: 0px;overflow: hidden;">
					  <!-- tab选项卡标题 -->  
					<ul class="layui-tab-title top_tab">
			           <li class="layui-this" lay-id="-1"><i class="layui-icon"></i> 首页</li>
			        </ul>  
					<div id="content" class="layui-tab-content">
						<div class="layui-tab-item layui-show">
							<iframe src="/home" width="100%" height="100%" frameborder="0"></iframe>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" th:src="@{/js/jquery-1.8.3.min.js}"></script>
	<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
	<script>
	var element;
 	var active;
	//JavaScript代码区域
	layui.use(['element'], function(){
		element = layui.element;	
		//触发事件  
		active = {  
		    tabAdd: function(obj){ 
		       var openTitle = '&nbsp;'+$(obj).html();
               openTitle += '<i class="layui-icon layui-unselect layui-tab-close" data-id="' +$(obj).attr('nav-id')+ '">&#x1006;</i>';
		      //新增一个Tab项  
		     if($("li[lay-id='"+$(obj).attr('nav-id')+"']").length==0){
		    	element.tabAdd('admin-tab', {  
				        title: openTitle,
				        content: '<iframe src="'+$(obj).attr('data-url')+'" data-id="'+$(obj).attr('nav-id')+'"  width="100%" frameborder="0" scrolling="no"></iframe>',
				        id:$(obj).attr('nav-id')
				}).init();  
		     }		    
		     element.tabChange("admin-tab",$(obj).attr('nav-id'));   		     
		     resize();  
		     $(".layui-tab-close").click(function(){
		    	 active.tabDelete($(this).attr("data-id"));
		     });
		    },  
		   /*  tabAdd:function(obj){
		    	  var openTitle = '&nbsp;'+$(obj).attr("title");
	               openTitle += '<i class="layui-icon layui-unselect layui-tab-close" data-id="' +$(obj).attr('nav-id')+ '">&#x1006;</i>';
			      //新增一个Tab项  
			       if($("li[lay-id='"+$(obj).attr('nav-id')+"']").length==0){
			    	element.tabAdd('admin-tab', {  
					        title: openTitle,
					        content: '<iframe src="'+$(obj).attr('data-url')+'" data-id="'+$(obj).attr('nav-id')+'"  width="100%" frameborder="0" scrolling="no"></iframe>',
					        id:$(obj).attr('nav-id')
					}).init();  
			     }		    
			     element.tabChange("admin-tab",$(obj).attr('nav-id'));   		     
			     resize();  
			     $(".layui-tab-close").click(function(){
			    	 active.tabDelete($(this).attr("data-id"));
			     });
		    }, */
		    tabDelete: function(lay_id) {    
		        //删除指定Tab项    
		        element.tabDelete('admin-tab', lay_id); //删除（注意序号是从0开始计算）    
		    }  
		    ,tabChange: function(lay_id){  
		      //切换到指定Tab项  
		      element.tabChange('admin-tab', lay_id); //切换到：用户管理  
		    }  
		}; 	 
		
		element.init();
		element.render('nav', 'side');
	});
	
	//iframe自适应  
	function resize(){  
	    var $content = $('.admin-nav-card .layui-tab-content');  
	    $content.height($(this).height() - 41);  
	    $content.find('iframe').each(function() {  
	        $(this).height($content.height());  
	    });  
	}  
	$(this).on('resize', function() {  
	    var $content = $('.admin-nav-card .layui-tab-content');  
	    $content.height($(this).height() - 41);  
	    $content.find('iframe').each(function() {  
	        $(this).height($content.height());  
	    });  
	}).resize();
</script>
</body>
</html>